<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">订单完成</text>
     <!-- <button class="back-btn" @click="goBack">返回</button> -->
    </view>

    <!-- 订单信息总结 -->
    <view class="section">
      <text class="section-title">订单信息</text>
      <view class="info-item">
        <text class="info-label">订单编号:</text>
        <text class="info-value">{{order.orderId}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">乘客信息:</text>
        <text class="info-value">{{user.name}} | {{phone}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">{{order.createTime}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">到达时间：</text>
        <text class="info-value">{{order.completeTime}}</text>
      </view>
    </view>

    <!-- 行程信息 -->
    <view class="section">
      <text class="section-title">行程信息</text>
      <view class="info-item">
        <text class="info-label">起点：</text>
        <text class="info-value">{{order.startAddress}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">终点：</text>
        <text class="info-value">{{order.endAddress}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">行程距离：</text>
        <text class="info-value">15.3公里</text>
      </view>
      <view class="info-item">
        <text class="info-label">行程时间：</text>
        <text class="info-value">30分钟</text>
      </view>
    </view>

    <!-- 费用信息 -->
    <view class="section">
      <text class="section-title">费用信息</text>
      <view class="info-item">
        <text class="info-label">里程费用：</text>
        <text class="info-value">¥{{order.price}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">其他费用：</text>
        <text class="info-value">¥0.00</text>
      </view>
      <view class="info-item total">
        <text class="info-label">总费用：</text>
        <text class="info-value">¥{{order.price}}</text>
      </view>
    </view>

    <!-- 支付信息 -->
    <view class="section">
      <text class="section-title">支付信息</text>
      <view class="info-item">
        <text class="info-label">支付状态：</text>
        <text class="info-value">未支付</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="btn" @click="goHome">返回首页</button>
      <button class="btn" @click="viewRating">查看评价</button>
    </view>
  </view>
</template>

<script>
import {getUser} from '@/request/order.js'
import {getDistance} from '@/request/distance.js'
export default {
	
	data() {
		return {
			order:null,
			user:null,
			distance:null,
			time:null,
			phone:null
		}
	},
	onLoad(options) {
		if (options.data) {
		      this.order = JSON.parse(decodeURIComponent(options.data)).data;
		      console.log('Received object:', this.order);
			  
			  this.distance = getDistance.getMapDistance(this.order.startLat,this.order.startLng,this.order.endLat,this.order.endLng);
			  this.time = Math.round(this.distance * 2)
				console.log(this.distance,this.time);
			  getUser(this.order.passengerId).then(res =>{
				  if(res == null){
					  uni.showToast({
					  	title: '网络错误',
					  	icon: 'none'
					  })
					  return;
				  }
				  this.user = res.data;
				  this.phone = this.maskPhoneNumber(this.user.phone);
				  console.log(res);
			  }).catch(err =>{
				  console.log(err);
			  })
		      // 使用对象
		    }
	},
  methods: {
	  //去首页
    goHome() {
      uni.switchTab({
        url: '/pages/firstPage/firstPage'
      });
    },
	//隐藏手机号部分
	maskPhoneNumber(phone) {
		if (phone.length !== 11) return "无效手机号"; // 确保手机号是11位
		return phone.substring(0, 2) + "*******" + phone.substring(9, 11);
	},
	//去看评价
    viewRating() {
      // uni.navigateTo({
      //   url: '/pages/rating/rating'
      // });
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.back-btn {
  background-color: #1B6EF3;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}

.section {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.info-label {
  font-weight: bold;
}

.info-value {
  color: #666;
}

.info-item.total {
  font-weight: bold;
  color: #1B6EF3;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.btn {
  background-color: #1B6EF3;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  flex: 1;
  margin: 0 5px;
}

.btn:first-child {
  margin-left: 0;
}

.btn:last-child {
  margin-right: 0;
}
</style>